/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  Text,
  useTheme,
  Container,
  Button,
  SuffixInput,
  IconArrowRight,
  Select,
  InputDatalist, CheckSwitch,
  InputLine, LineColumn,
  CommitInput
} from "customize-easy-ui-component";
import { DialogEnterReturn } from "../../context/DialogEnterReturn";
//import queryString from "querystring";
import {useCommnBaseParm, CommnBase} from "./CommnBase";

const queryString = require('query-string');
export const 蹦极型式=['其他'];
export const 滑道种类=["直滑式","往复式","双索往复式","双向滑索","管式","循环式","槽式"];
export const 回收方式=['其他'];
export const 驱动形式=['电机',"无动力","电机、液压","润滑水","电机、气动","液压","人力","内燃机",'其他'];
export const 游乐设施级别=['A级','B级','C级'];
export const 游乐池类型=["成人滑梯水池","造波池","儿童滑梯水池","流水池"];


interface 游乐props {
  id?: string;
  readOnly?: boolean;
  editable?: boolean;
  //当前设备数据(确认修改之后)
  eqp?:any;
  //去修改设备数据
  mutationFunc: (...args: any[]) => any;
}
/**设计使用寿命: 直接改名 设计使用年限: {公用部分的}；
 *运行高度：有2个字段RUNHEIGH  MOV_HIGH， 取后一个MOV_HIGH；
 * */
export const 游乐: React.FunctionComponent<游乐props> =
    ({
       readOnly,
       id,
       editable,
       eqp=null,    //从好几代祖先前的DetailedGuide在graphQL获得后端服务器数据层层传递下来的。
       mutationFunc,
     }) =>
{
  //const qs= queryString.parse(window.location.search);
  const theme = useTheme();
  const {save}= window.history.state?.state??{};      //通用伪对话框传递格式
  const edt = save?  save : eqp;

  const [level, setLevel] = React.useState(edt.level);
  const [angl, setAngl] = React.useState(edt.angl);
  const [leng, setLeng] = React.useState(edt.leng);
  const [pnum, setPnum] = React.useState(edt.pnum);
  const [vl, setVl] = React.useState(edt.vl);
  const [sdia, setSdia] = React.useState(edt.sdia);
  const [grad, setGrad] = React.useState(edt.grad);
  const [mbig, setMbig] = React.useState(edt.mbig);
  const [high, setHigh] = React.useState(edt.high);
  const [hlf, setHlf] = React.useState(edt.hlf);
  const  svp = edt?.svp;

  const [半径, set半径] = React.useState(svp?.半径);
  const [蹦极, set蹦极] = React.useState(svp?.蹦极);
  const [场面积, set场面积] = React.useState(svp?.场面积);
  const [电压, set电压] = React.useState(svp?.电压);
  const [额载荷, set额载荷] = React.useState(svp?.额载荷);
  const [副速度, set副速度] = React.useState(svp?.副速度);
  const [绳直径, set绳直径] = React.useState(svp?.绳直径);
  const [高差, set高差] = React.useState(svp?.高差);
  const [轨长, set轨长] = React.useState(svp?.轨长);
  const [轨高, set轨高] = React.useState(svp?.轨高);
  const [轨数, set轨数] = React.useState(svp?.轨数);
  const [轨矩, set轨矩] = React.useState(svp?.轨矩);
  const [提送, set提送] = React.useState(svp?.提送);
  const [道种类, set道种类] = React.useState(svp?.道种类);
  const [道材索根, set道材索根] = React.useState(svp?.道材索根);
  const [索数, set索数] = React.useState(svp?.索数);
  const [回收式, set回收式] = React.useState(svp?.回收式);
  const [驱动式, set驱动式] = React.useState(svp?.驱动式);
  const [设备高, set设备高] = React.useState(svp?.设备高);
  const [深度, set深度] = React.useState(svp?.深度);
  const [设规范, set设规范] = React.useState(svp?.设规范);
  const [小蹦, set小蹦] = React.useState(svp?.小蹦);
  const [池型, set池型] = React.useState(svp?.池型);
  const [池深, set池深] = React.useState(svp?.池深);
  const [制规范, set制规范] = React.useState(svp?.制规范);
  const [舱数, set舱数] = React.useState(svp?.舱数);
  const [舱高, set舱高] = React.useState(svp?.舱高);
  const  pa = edt?.pa;
  const [车数, set车数] = React.useState(pa?.车数);
  const [电动机转速, set电动机转速] = React.useState(pa?.电动机转速);
  const [副功率, set副功率] = React.useState(pa?.副功率);
  const [轨矩长, set轨矩长] = React.useState(pa?.轨矩长);
  const [回收装, set回收装] = React.useState(pa?.回收装);
  const [主功率, set主功率] = React.useState(pa?.主功率);
  const [滑梯高, set滑梯高] = React.useState(pa?.滑梯高);
  const [平距, set平距] = React.useState(pa?.平距);
  const [线速度, set线速度] = React.useState(pa?.线速度);
  const [圆速度, set圆速度] = React.useState(pa?.圆速度);
  const [直半径, set直半径] = React.useState(pa?.直半径);
  //肢解可复用的共同组件模式： Hook + 配套的组件。
  const cbp =useCommnBaseParm(eqp, svp, pa, save);

  async function confirmation() {
    const newdat={ ...eqp,  ...cbp.out,
      level,angl,leng,pnum,vl,sdia,
      grad,mbig,high,hlf,
      svp: { ...cbp.svpO,
        半径,蹦极,场面积,电压,额载荷,副速度,绳直径,高差,轨长,轨高,轨数,轨矩,
        提送,道种类,道材索根,索数,回收式,驱动式,设备高,深度,设规范,小蹦,
        池型,池深,制规范,舱数,舱高,
        }
      ,
      pa: { ...cbp.paO,
        车数,电动机转速,副功率,轨矩长,回收装,主功率,滑梯高,平距,
        线速度,圆速度,直半径,
        }

    };

    return newdat;
  }


  return (
    <div
      css={{
        [theme.mediaQueries.md]: {
          height: "auto",
          display: "block"
        }
      }}
    >
      <hr/>
      <Text
        css={{
          flex: 1,
          textAlign: "center",
          [theme.mediaQueries.md]: {
            textAlign: "left"
          }
        }}
        wrap={false}
        variant="h5"
        gutter={false}
      >
        {edt.cod} 游乐技术参数
      </Text>

      <div
        css={{
          flex: 1,
          [theme.mediaQueries.md]: {
            flex: "none"
          }
        }}
      >
        <div>
          <Container>
            <div
              css={{
                paddingTop: theme.spaces.lg,
                paddingBottom: theme.spaces.lg
              }}
            >

            <CommnBase cbp={cbp} id={id!}  confirmation={confirmation}/>
            <Text variant="h5">游乐参数</Text>
            <LineColumn >
              <InputLine label={`摆角:`}>
                <SuffixInput  onSave={txt=> setAngl(txt||undefined)}
                              type="number"  value={ angl || ''}>度</SuffixInput>
              </InputLine>
              <InputLine label={`半径:`}>
                <SuffixInput  onSave={txt=> set半径(txt||undefined)}
                              type="number"  value={ 半径 || ''}>m</SuffixInput>
              </InputLine>
              <InputLine label={`蹦极型式:`}>
                <InputDatalist value={ 蹦极 || ''} datalist={蹦极型式}
                               onListChange={v => set蹦极(v ||undefined)} />
              </InputLine>
              <InputLine label={`长度:`}>
                <SuffixInput  onSave={txt=> setLeng(txt||undefined)}
                              type="number"  value={ leng || ''}>m</SuffixInput>
              </InputLine>
              <InputLine label={`车场面积:`}>
                <SuffixInput  onSave={txt=> set场面积(txt||undefined)}
                              type="number"  value={ 场面积 || ''}>平方米</SuffixInput>
              </InputLine>
              <InputLine label={`车辆/游船总数:`}>
                <SuffixInput  onSave={txt=> set车数(txt||undefined)}
                               value={ 车数 || ''}>辆(艘)</SuffixInput>
              </InputLine>
              <InputLine label={`电动机转速:`}>
                <SuffixInput  onSave={txt=> set电动机转速(txt||undefined)}
                              value={ 电动机转速 || ''}>转/min</SuffixInput>
              </InputLine>
              <InputLine label={`电压:`}>
                <SuffixInput  onSave={txt=> set电压(txt||undefined)}
                              type="number"  value={ 电压 || ''}>V</SuffixInput>
              </InputLine>
              <InputLine label={`额定乘客人数:`}>
                <SuffixInput  onSave={txt=> setPnum(txt||undefined)}
                              type="number"  value={ pnum || ''}>人</SuffixInput>
              </InputLine>
              <InputLine label={`额定速度:`}>
                <SuffixInput  onSave={txt=> setVl(txt||undefined)}
                              type="number"  value={ vl || ''}>m/s</SuffixInput>
              </InputLine>
              <InputLine label={`额定载荷:`}>
                <CommitInput  value={ 额载荷 || ''}  onSave={txt => set额载荷(txt||undefined) } />
              </InputLine>
              <InputLine label={`副功率:`}>
                <SuffixInput  onSave={txt=> set副功率(txt||undefined)}
                              type="number"  value={ 副功率 || ''}>千瓦</SuffixInput>
              </InputLine>
              <InputLine label={`副速度:`}>
                <SuffixInput  onSave={txt=> set副速度(txt||undefined)}
                              type="number"  value={ 副速度 || ''}>m/s</SuffixInput>
              </InputLine>
              <InputLine label={`钢丝绳直径:`}>
                <SuffixInput  onSave={txt=> set绳直径(txt||undefined)}
                              type="number"  value={ 绳直径 || ''}>mm</SuffixInput>
              </InputLine>
              <InputLine label={`高差:`}>
                <SuffixInput  onSave={txt=> set高差(txt||undefined)}
                              type="number"  value={ 高差 || ''}>m</SuffixInput>
              </InputLine>
              <InputLine label={`轨道长:`}>
                <SuffixInput  onSave={txt=> set轨长(txt||undefined)}
                              type="number"  value={ 轨长 || ''}>m</SuffixInput>
              </InputLine>
              <InputLine label={`轨道高度:`}>
                <SuffixInput  onSave={txt=> set轨高(txt||undefined)}
                              type="number"  value={ 轨高 || ''}>m</SuffixInput>
              </InputLine>
              <InputLine label={`轨道数:`}>
                <SuffixInput  onSave={txt=> set轨数(txt||undefined)}
                              type="number"  value={ 轨数 || ''}>条</SuffixInput>
              </InputLine>
              <InputLine label={`轨矩:`}>
                <SuffixInput  onSave={txt=> set轨矩(txt||undefined)}
                               value={ 轨矩 || ''}>mm</SuffixInput>
              </InputLine>
              <InputLine label={`轨矩长度:`}>
                <SuffixInput  onSave={txt=> set轨矩长(txt||undefined)}
                              type="number"  value={ 轨矩长 || ''}>m</SuffixInput>
              </InputLine>
              <InputLine label={`滑车提升输送设备:`}>
                <CommitInput  value={ 提送 || ''}  onSave={txt => set提送(txt||undefined) } />
              </InputLine>
              <InputLine label={`滑道种类:`}>
                <InputDatalist value={ 道种类 || ''} datalist={滑道种类}
                               onListChange={v => set道种类(v ||undefined)} />
              </InputLine>
              <InputLine label={`滑道主体材料/承载索根数:`}>
                <CommitInput  value={ 道材索根 || ''}  onSave={txt => set道材索根(txt||undefined) } />
              </InputLine>
              <InputLine label={`滑索道数:`}>
                <SuffixInput  onSave={txt=> set索数(txt||undefined)}
                              type="number"  value={ 索数 || ''}>条</SuffixInput>
              </InputLine>
              <InputLine label={`回收方式:`}>
                <InputDatalist value={ 回收式 || ''} datalist={回收方式}
                               onListChange={v => set回收式(v ||undefined)} />
              </InputLine>
              <InputLine label={`回收装置:`}>
                <CommitInput  value={ 回收装 || ''}  onSave={txt => set回收装(txt||undefined) } />
              </InputLine>
              <InputLine label={`回转直径:`}>
                <SuffixInput  onSave={txt=> setSdia(txt||undefined)}
                              type="number"  value={ sdia || ''}>m</SuffixInput>
              </InputLine>
              <InputLine label={`倾夹角或坡度:`}>
                <SuffixInput  onSave={txt=> setGrad(txt||undefined)}
                              type="number"  value={ grad || ''}>%</SuffixInput>
              </InputLine>
              <InputLine label={`驱动形式:`}>
                <InputDatalist value={ 驱动式 || ''} datalist={驱动形式}
                               onListChange={v => set驱动式(v ||undefined)} />
              </InputLine>
              <InputLine label={`驱动主功率:`}>
                <SuffixInput  onSave={txt=> set主功率(txt||undefined)}
                              type="number"  value={ 主功率 || ''}>千瓦</SuffixInput>
              </InputLine>
              <InputLine label={`设备高度:`}>
                <SuffixInput  onSave={txt=> set设备高(txt||undefined)}
                              type="number"  value={ 设备高 || ''}>m</SuffixInput>
              </InputLine>
              <InputLine label={`设计规范:`}>
                <CommitInput  value={ 设规范 || ''}  onSave={txt => set设规范(txt||undefined) } />
              </InputLine>
              <InputLine label={`深度:`}>
                <SuffixInput  onSave={txt=> set深度(txt||undefined)}
                              type="number"  value={ 深度 || ''}>m</SuffixInput>
              </InputLine>
              <InputLine label={`是否小蹦极:`}>
                <CheckSwitch checked={小蹦 || false} onChange={e => set小蹦(小蹦? undefined:true)} />
              </InputLine>
              <InputLine label={`是否移动大型游乐设施:`}>
                <CheckSwitch checked={mbig || false} onChange={e => setMbig(mbig? undefined:true)} />
              </InputLine>
              <InputLine label={`水滑梯高度:`}>
                <CommitInput  value={ 滑梯高 || ''}  onSave={txt => set滑梯高(txt||undefined) } />
              </InputLine>
              <InputLine label={`线路平距（滑索长度）:`}>
                <SuffixInput  onSave={txt=> set平距(txt||undefined)}
                              type="number"  value={ 平距 || ''}>m</SuffixInput>
              </InputLine>
              <InputLine label={`游乐池类型:`}>
                <InputDatalist value={ 池型 || ''} datalist={游乐池类型}
                               onListChange={v => set池型(v ||undefined)} />
              </InputLine>
              <InputLine label={`游乐池水深:`}>
                <SuffixInput  onSave={txt=> set池深(txt||undefined)}
                              type="number"  value={ 池深 || ''}>m</SuffixInput>
              </InputLine>
              <InputLine label={`游乐设施高度:`}>
                <SuffixInput  onSave={txt=> setHigh(txt||undefined)}
                              type="number"  value={ high || ''}>m</SuffixInput>
              </InputLine>
              <InputLine label={`游乐设施级别:`}>
                <Select inputSize="md"  value={ level || ''}
                        onChange={e => setLevel( e.currentTarget.value||undefined ) } >
                  <option></option>
                  { 游乐设施级别.map((one,i) => (<option key={i}>{one}</option> )) } </Select>
              </InputLine>
              <InputLine label={`游乐设施线速度:`}>
                <SuffixInput  onSave={txt=> set线速度(txt||undefined)}
                              type="number"  value={ 线速度 || ''}>m/s</SuffixInput>
              </InputLine>
              <InputLine label={`圆周速度:`}>
                <SuffixInput  onSave={txt=> set圆速度(txt||undefined)}
                              type="number"  value={ 圆速度 || ''}>m/s</SuffixInput>
              </InputLine>
              <InputLine label={`运行高度:`}>
                <SuffixInput  onSave={txt=> setHlf(txt||undefined)}
                              type="number"  value={ hlf || ''}>m</SuffixInput>
              </InputLine>
              <InputLine label={`直(半)径:`}>
                <SuffixInput  onSave={txt=> set直半径(txt||undefined)}
                              type="number"  value={ 直半径 || ''}>m</SuffixInput>
              </InputLine>
              <InputLine label={`制造规范:`}>
                <CommitInput  value={ 制规范 || ''}  onSave={txt => set制规范(txt||undefined) } />
              </InputLine>
              <InputLine label={`座舱高度:`}>
                <SuffixInput  onSave={txt=> set舱高(txt||undefined)}
                              type="number"  value={ 舱高 || ''}>m</SuffixInput>
              </InputLine>
              <InputLine label={`座舱数:`}>
                <SuffixInput  onSave={txt=> set舱数(txt||undefined)}
                              type="number"  value={ 舱数 || ''}>个</SuffixInput>
              </InputLine>

            </LineColumn>
              <Text variant="h5">其它参数</Text>
              <LineColumn >
              </LineColumn>

              <Button size="lg" intent="primary"  iconAfter={<IconArrowRight />}
                      css={{ marginTop: theme.spaces.sm, whiteSpace:'unset' }}
                onPress={ async () => {
                  const eqpNew=await confirmation();
                  await mutationFunc(eqpNew);
                } }
              > 确认修改检查并保存到后端
              </Button>
            </div>
          </Container>
        </div>
      </div>

    </div>
  );
};

